<template>
    <search-table
            :columns="columns"
            :data="data"
            :total="total"
            @queryFun="getDataList"
            :page.sync="pageIndex"
            :size.sync="pageSize">
			<template slot="search">
                    <Input placeholder="提交队伍" v-model="querySearch.teamName" class="action-style" @on-change="onBounceQuery" clearable />
                    <!-- <Input placeholder="提交用户" class="action-style" v-model="querySearch.userName"  @on-change="onBounceQuery" clearable/> -->
                    <Select filterable v-model="querySearch.attackType" filterable placeholder="攻击类型" clearable class="action-style" @on-change="onBounceQuery">
                            <Option :value="item.dictid" v-for="item in attackChooseList" :key="item.dictid" :title="item.dictname">{{item.dictname}}</Option>
                        </Select>
                    <!-- <Select filterable placeholder="VPN分发状态" class="action-style"  v-model="querySearch.statusDistribute"  @on-change="onBounceQuery"  clearable>
                        <Option v-for="item in statusDistributeList" :label="item.label" :key="item.value" :value="item.value" />
                    </Select> -->
			</template>
    </search-table>
</template>

<script>
    import { debounce } from '@/libs/utils';
    import { allDirection } from '@/api/dict'
    import { 
        reportLog,
    } from '@/api/referee';
    export default {
        name: 'examineLog',
        props: {
            disabledAllBtn: {
                type: Boolean,
                default: false
            }
        },
        components: {
            
        },
        async created() {
            await this.getAttackTypes()
            await this.getHwAttackLevelTypes()
        },
        mounted() {
            this.getDataList()
        },
        beforeDestroy() {
        },
        data() {
            return {
                total: 0,
                pageIndex: 1,
                pageSize: 10,
                querySearch: {
                    teamName: '',
                    userName: '',
                    attackType: '',
                },
                attackChooseList: [],
                attackLevelList: [],
                columns: [
                    {
                        placement: 'top-left',
                        title: '提交队伍',
                        key: 'groupName',
                        tooltip: true,
                        width: 200,
                    },
                    {
                        placement: 'top-left',
                        title: '提交用户',
                        key: 'creatorName',
                        tooltip: true,
                        width: 200,
                    },
                    {
                        title: '裁判名称',
                        key: 'userName',
                        width: 120,
                        tooltip: true,
                    },
                    {
                        title: '攻击类型',
                        key: 'attackType',
                        width: 120,
                        tooltip: true,
                        render: (h, params) => {
                            return h('p',this.getValueByList(params.row.attackType,this.attackChooseList))
                        }
                    },
                    {
                        title: '危害程度',
                        key: 'attackLevel',
                        width: 150,
                        tooltip: true,
                        render: (h, params) => {
                            return h('Tooltip',{
                                props: {
                                    transfer: true,
                                    content: this.getValueByList(params.row.attackLevel,this.attackLevelList),
                                    placement: 'top-start'
                                }
                            },[
                                h('p',{
                                    style: {
                                        width: '150px',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }
                                },this.getValueByList(params.row.attackLevel,this.attackLevelList))
                            ])
                            return 
                        }
                    },
                    {
                        title: '审核意见',
                        key: 'approvalInfo',
                        width: 300,
                        tooltip: true,
                    },
                    {
                        title: '审核时间',
                        key: 'createTime',
                        width: 160,
                        tooltip: true,
                    },
                    {
                        title: '结果',
                        key: 'status',
                        width: 80,
                        tooltip: true,
                        render: (h, params) => {
                            return h('p',params.row.status == 2?'审核通过':'审核驳回')
                        }
                    },
                    {
                        title: '危险等级',
                        key: 'level',
                        width: 120,
                        tooltip: true,
                        render: (h, params) => {
                            return h('p',this.getValueByList(params.row.level,this.levelList))
                        }
                    },
                    {
                        title: '危险等级分数',
                        key: 'levelScore',
                        width: 120,
                        tooltip: true,
                    },
                    {
                        title: '防守方扣分',
                        key: 'score',
                        width: 120,
                        tooltip: true,
                    },
                ],
                data: [],
                levelList: [
                    { dictid: 'serious', dictname: '严重'},
                    { dictid: 'high', dictname: '高危'},
                    { dictid: 'middle', dictname: '中危'},
                    { dictid: 'low', dictname: '低危'},
                    { dictid: 'ignore', dictname: '忽略'},
                ]
            }
        },
        methods: {
            // 获取攻击类型列表
            getAttackTypes() {
                return new Promise(resolve => {
                allDirection({ dictTypeID: 'hwAttackTypes' }).then(({ code, message, attribute = {} }) => {
                    attribute = attribute.attribute || []
                    if (code !== 1) {
                    this.$Message.warning(message)
                    return
                    }
                    let list = []
                    attribute.forEach(item => list = list.concat(item.dictEntryList))
                    this.attackChooseList = list
                }).catch(() => {
                    this.$Message.error('获取攻击类型列表异常')
                }).finally(() => {
                    resolve()
                })
                })
            },
            // 获取目标危害程度
            getHwAttackLevelTypes() {
                return new Promise(resolve => {
                    allDirection({ dictTypeID: 'hwAttackLevelTypes' }).then(({ code, message, attribute = {} }) => {
                        attribute = attribute.attribute || []
                        if (code !== 1) {
                        this.$Message.warning(message)
                        return
                        }
                        let list = []
                        attribute.forEach(item => list = list.concat(item.dictEntryList))
                        this.attackLevelList = list
                    }).catch(() => {
                        this.$Message.error('获取目标危害程度列表异常')
                    }).finally(() => {
                        resolve()
                    })
                })
            },
            // 从列表中找出对应ID的名称，无法获取时返回ID
            getValueByList(id, list) {
                let item = list.find(item => item.dictid === id)
                return item ? item.dictname : id
            },
            // 刷新重置
            refreshFile() {
                this.searchParams.vulnerabilityName = ''
                this.pageChange(1)
            },
            valueToLabel(key, list) {
                let label = ''
                list.forEach(ele => {
                    if(key == ele.value) {
                        label = ele.label
                    }
                })
                return label || key
            },
            // vpn列表数据查询
            getDataList() {
                let params = {
                    testId: this.$route.query.id,
                    pageSize: this.pageSize,
                    pageIndex: this.pageIndex,
                    groupName: this.querySearch.teamName,
                    // creatorName: this.querySearch.userName,
                    attackType: this.querySearch.attackType,
                }
                reportLog(params).then(({data = {}}) => {
					if(data.code == 1) {
						this.data = data.data.items
						this.total = data.data.total
					}
                }).finally(() => {
                    // if(this.type == 2) {
                    //     clearInterval(this.userListTimer)
                    //     this.userListTimer = setInterval(() => {
                    //         this.getDataList()
                    //     }, 10000);
                    // }
                })
            },
            pageChange(page) {
                this.pageIndex = page
                this.getDataList()
            },
            onBounceQuery: debounce(function () {
                this.pageChange(1)
            },200),
        }
    }
</script>

<style scoped>
.header-box {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
}
.action-box {
    display: flex;
    flex-wrap: wrap;
}
.action-style {
    width: 150px;
    margin-right: 15px;
    margin-bottom: 8px
}
.button-style {
    margin-right: 15px;
    margin-bottom: 8px
}
</style>